<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="contact">
    <div class="w">
        <div class="top">
            <ul>
                <li>
                    <a href="">
                        <img src="img/bottom1.png" alt="">
                        <span>大咖级讲师亲自授课</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/bottom.png" alt="">
                        <span>课程为学员成长持续赋能</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/bottom2.png" alt="">
                        <span>学员真实情况大公开</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content">
            <dl>
                <dt>关于尚硅谷</dt>
                <dd>教育理念</dd>
                <!-- <dd>名师团队</dd>
                <dd>学员心声</dd> -->
            </dl>
            <dl>
                <dt>资源下载</dt>
                <dd>视频下载</dd>
                <!-- <dd>资料下载</dd>
                <dd>工具下载</dd> -->
            </dl>
            <dl>
                <dt>加入我们</dt>
                <dd>招聘岗位</dd>
                <!-- <dd>岗位介绍</dd>
                <dd>招贤纳师</dd> -->
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd>http://www.atguigu.com
                <dd>
            </dl>
        </div>
    </div>
</div>
<div th:fragment="copyright">
    <div class="down">
        尚硅谷书城.Copyright ©2015
    </div>
</div>
<div th:fragment="pagination(path)">

    <!--  当前页等于第一页时不显示首页  -->
    <div th:if="${data.currentPage!=1}"><a th:href="@{${path}(currentPage=1, pageSize=10)}">首页</a>
    </div>
    <!--  跳转到上一页,上一页大于等于1的时候显示   -->
    <div th:if="${data.currentPage-1>=1}"><a
            th:href="@{${path}(currentPage=${data.currentPage-1}, pageSize=10)}">上一页</a></div>
    <ul>
        <!--   当前页的前面2页，如果页数小于1，则不显示     -->
        <li th:if="${data.currentPage-2>0}">
            <a th:href="@{${path}(currentPage=${data.currentPage-2}, pageSize=10)}"
               th:text="${data.currentPage-2}"></a>
        </li>
        <!--   当前页的前面1页，如果页数小于1，则不显示     -->
        <li th:if="${data.currentPage-1>0}">
            <a th:href="@{${path}(currentPage=${data.currentPage-1}, pageSize=10)}"
               th:text="${data.currentPage-1}"></a>
        </li>
        <!--   当前页  -->
        <li th:class="active" th:text="${data.currentPage}">
            <a th:href="@{${path}(currentPage=${data.currentPage}, pageSize=10)}"
               th:text="${data.currentPage}"></a>
        </li>
        <!--   当前页的后面1页，如果页数超过总页数，则不显示     -->
        <li th:if="${data.currentPage+1<=data.totalPage}">
            <a th:href="@{${path}(currentPage=${data.currentPage+1}, pageSize=10)}"
               th:text="${data.currentPage+1}"></a>
        </li>
        <!--   当前页的后面2页，如果页数超过总页数，则不显示     -->
        <li th:if="${data.currentPage+2<=data.totalPage}">
            <a th:href="@{${path}(currentPage=${data.currentPage+2}, pageSize=10)}"
               th:text="${data.currentPage+2}"></a>
        </li>
    </ul>
    <!--  跳转到下一页,下一页不超过总页数的时候显示   -->
    <div th:if="${data.currentPage+1<=data.totalPage}"><a
            th:href="@{${path}(currentPage=${data.currentPage+1}, pageSize=10)}">下一页</a></div>
    <!--  当前页等于最后一页时不显示末页  -->
    <div th:if="${data.currentPage!=data.totalPage}"><a
            th:href="@{${path}(currentPage=${data.totalPage}, pageSize=10)}">末页</a></div>
    <!--  显示共多少页   -->
    <span>共<span th:text="${data.totalPage}"></span>页</span>
    <!--  显示共多少条记录 -->
    <span><span th:text="${data.totalCount}"></span>条记录</span>

    <!-- 跳转页面   -->
    <span>到第</span>
    <input type="text" v-model="toPage">
    <span>页</span>
    <button @click="goPage">确定</button>

</div>


</body>
</html>